// src/composables/useDebouncedResize.js
import { onMounted, onUnmounted } from 'vue'
import { debounce } from '@/utils/debounce.js'

/**
 * 用于处理带防抖的窗口resize事件
 * @param {Function} callback - resize时执行的回调函数
 * @param {number} wait - 防抖等待时间，默认500ms
 * @returns {Object} 包含清理函数的方法
 */
export function useDebouncedResize(callback, wait = 500) {
    let debouncedHandler = null

    // 初始化防抖函数
    const initResizeListener = () => {
        debouncedHandler = debounce(callback, wait)
        window.addEventListener('resize', debouncedHandler)
    }

    // 清理事件监听
    const cleanupResizeListener = () => {
        if (debouncedHandler) {
            window.removeEventListener('resize', debouncedHandler)
            debouncedHandler = null
        }
    }

    // 组件挂载时初始化
    onMounted(() => {
        initResizeListener()
        // console.log('initResizeListener')
    })

    // 组件卸载时清理
    onUnmounted(() => {
        cleanupResizeListener()
        // console.log('cleanupResizeListener')
    })

    // 返回清理函数，以便手动调用
    return {
        cleanup: cleanupResizeListener,
        reinit: initResizeListener,
    }
}
